<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box1{
        background-color: aqua;
        width: 200px;
        height: 200px;
    }
</style>
<body>
    <div class="box1"></div>
    
    <script>
        /* 
                event 事件
                    -事件对象是有浏览器在事件触发的时候所创建的对象
                        对象中封装了事件相关的各种信息
                    -可以通过事件对象来获取事件的各种信息
                        -比如X,Y轴,什么时候,做了什么事,按了什么按键
                    -浏览器在创建事件对象后,会将事件对象作为响应函数的参数传递
                        所以我们可以在回调函数中定义一个形参来接受事件
        */
        const box1  = document.getElementsByClassName("box1")[0]
       box1.addEventListener("mousemove",event => {
            console.log(event.clientX,event.clientY);
            box1.textContent = (event.clientX + "," + event.clientY)
       }) 
    </script>
</body>
</html>